
// 登录
var userinfor = document.querySelector("#userinfor");
var infor_menu = document.querySelector(".infor-menu");
var infor_header = document.querySelector(".infor-header");
var logout = document.getElementById("logout");
var state = getCookie("state");
if(state){
    state = JSON.parse(state);
    userinfor.innerHTML = state.phonenum;
    userinfor.style.color = "#" + "fff";
    userinfor.style.cursor = "pointer";
    infor_header.style.display = "block";
    infor_header.onmouseover = function(){
        infor_menu.style.height = 210 + "px";
    }
    infor_header.onmouseout = function(){
        infor_menu.style.height = 0 + "px";
    }
    userinfor.onmouseover = function(){
        infor_menu.style.height = 210 + "px";
    }
    userinfor.onmouseout = function(){
        infor_menu.style.height = 0 + "px";
    }
    infor_menu.onmouseover = function(){
        infor_menu.style.height = 210 + "px";
    }
    infor_menu.onmouseout = function(){
        infor_menu.style.height = 0 + "px";
    }
}


// top列表  二级菜单
$(function () {
    function Li_menu() {
        this.li_last = $("#li-last");
        this.li_menu = $(".li-menu");
        this.bindEvent();
    }
    Li_menu.prototype.bindEvent = function () {
        var _this = this;
        this.li_last.mouseover(function () {
            $(_this.li_menu).css({
                height: 70
            })
        });
        this.li_menu.mouseover(function () {
            $(_this.li_menu).css({
                height: 70
            })
        });
        this.li_menu.mouseout(function () {
            $(_this.li_menu).css({
                height: 0
            })
        });
        this.li_menu.mouseout(function () {
            $(_this.li_menu).css({
                height: 0
            })
        });
    }
    new Li_menu();
})


// 遮罩层协议

$(function () {
    function Mask() {
        this.mask_btn2 = $(".mask-btn2");
        this.top_mask = $(".top-mask");
        this.top_register = $("#top-register");
        this.mask = $(".mask");
        this.span_close = $(".span-close");
        this.mask_btn1 = $(".mask-btn1");
        this.top_login = $("#top-login");
        this.bindEvent();
    }

    Mask.prototype.bindEvent = function () {
        var _this = this;
        this.top_register.click(function () {
            $(_this.top_mask).css({
                opacity: 1,
                top: 200,
                zIndex: 101
            });
            $(_this.mask).css({
                display: "block"
            });
            _this.mask_btn1.click(function () {
                location.href = "register.html";
            });
        });
        this.top_login.click(function () {
            $(_this.top_mask).css({
                opacity: 1,
                top: 200,
                zIndex: 101
            })
            $(_this.mask).css({
                display: "block"
            });
            _this.mask_btn1.click(function () {
                location.href = "login.html";
            })
        });

        
        this.mask_btn2.click(function () {
            location.href = "index.html";
        })
        this.span_close.click(function () {
            location.href = "index.html";
        })
    }
    new Mask();
})


// header搜索框
$(function () {
    function Header_search(){
        this.input = $("#header-input");
        this.bindEvent();
    }
    
    Header_search.prototype.bindEvent = function(){
        var _this = this;
        this.input.focus (function () {
            $(_this.input).css({
                borderColor : "#" + "845f3f"
            })
        });
        this.input.blur (function () {
            $(_this.input).css({
                borderColor : "#" + "ddd"
            })
        });
    }
    new Header_search();
})


// 轮播图

var mySwiper = new Swiper("#swiper", {
    autoplay: {
        delay: 1500
    },
    loop: true,
    navigation: {
        nextEl: ".next",
        prevEl: ".prev"
    },
    speed: 800,
    pagination: {
        el: '.swiper-pagination',
        clickable: true,
        renderBullet: function (index, className) {
            return "<span class='" + className + " my-pagination'></span>"
        },
        bulletActiveClass: "my-active",
    },
})




// banner板块的nav导航部分

$(function(){

    function Ban_nav(){
        this.lis = $(".ban-nav-list li");
        this.banner = $(".banner");
        this.sections = $(".list_menu section");
        this.list_menu = $(".list_menu");
        this.bindEvent();
    } 

    Ban_nav.prototype.bindEvent = function(){
        var _this = this;
        this.lis.mouseover(function(){
            $(this).addClass("selected")
            .siblings().removeClass("selected");

            $(_this.sections).eq($(this).index(this.lis))
            .addClass("selected")
            .siblings().removeClass("selected");

            $(_this.list_menu).addClass("selecteds");
        });
        this.banner.mouseleave(function(){
            $(_this.lis).removeClass("selected");
            $(_this.sections).removeClass("selected");
            $(_this.list_menu).removeClass("selecteds");
        });
    }
    new Ban_nav();
})


// 吸顶菜单
$(function(){
    function Ceiling(){
        this.ceiling = $(".ceiling");
        this.bindEvent();
    }
    Ceiling.prototype.bindEvent = function(){
        var _this = this;
        $(window).scroll(function(){
            var scrollTop = $(window).scrollTop();
            if(scrollTop > 477){
                
                $(_this.ceiling).css({
                    display : "block"
                });
            }else{
                $(_this.ceiling).css({
                    display : "none"
                });
            }
        })
    }
    new Ceiling();
})  

// 吸顶菜单中的form中的input
$(function () {
    function Ceiling_search(){
        this.input = $("#ceiling-input");
        this.bindEvent();
    }
    
    Ceiling_search.prototype.bindEvent = function(){
        var _this = this;
        this.input.focus (function () {
            $(_this.input).css({
                borderColor : "#" + "845f3f"
            })
        });
        this.input.blur (function () {
            $(_this.input).css({
                borderColor : "#" + "ddd"
            })
        });
    }
    new Ceiling_search();
})


// new板块的轮播图

var new_swiper = new Swiper("#swiper-new" , {
    slidesPerView : 4,
    spaceBetween : 5,
    navigation: {
        nextEl: '.next',
        prevEl: '.prev',
      },
})


// 商品数据渲染
    var re_main = $(".re-main");

    $.ajax("./libs/goods-list.json")
    .then(function(res){
        var list = res.data;
        var html = list.map(function(item , index){
            return `<div class="goods-list" data-index=${index}>
                           <a href="###">
                               <div class="li-top">
                                   <img data-src="${item.image}" alt="">
                                   <p>
                                       ${item.introduction}
                                   </p>
                                   <div class="color-type" style="display: ${item.show};">
                                       <b>${item.colorType}</b>
                                       色可选
                                   </div>
                               </div>
                               <div class="li-bottom">
                               <div class="add-cart" data-id=${item.id}>加入购物车</div>
                               <div class="specil">
                                   <span class="goods-type" style="display: ${item.goodsTypeShow};">${item.goodsType}</span>
                                  </div>
                                   <p>
                                       ${item.goods}
                                   </p>
                                   <span class="goods-price">
                                       <i>￥</i>
                                       <b>${item.goodsPrice}</b>
                                       <em style="display: ${item.start};">起</em>
                                   </span>
                               </div>
                           </a>
                      </div>`;
        }).join("");
        re_main.html(html);
        $(".goods-list").find("img").lazyload();
    });

    $(".recommend").on("click" , ".goods-list" , function(){
        var data_index = $(this).attr("data-index");
        location.href = "./goods-details.html#index="+data_index;
    })
    $(".recommend").on("click" , ".add-cart" , function(e){
        // 阻止事件冒泡
        if(e&&e.stopPropagation){//非IE
            e.stopPropagation();
         }
         else{//IE
             window.event.cancelBubble=true;
         }
        var data_id = $(this).attr("data-id");
        location.href = "./shopcart.html?id="+data_id;
    })
    
// 楼梯效果

class Stairs{
    constructor(){
        this.lis = $(".stairs li");
        this.contents = $(".content");
        this.totop = $(".totop");
        this.init();
        this.bindEvent();
    }   
    // init 初始化的意思
    init(){
        let _this = this;
        this.lis.attr("max" , function(i){
            if(i === _this.contents.length - 1){
                return "max";
            }
            return _this.contents.eq(i + 1).offset().top - 80 + "px";
        })
        this.lis.attr("min" , function(i){
            return _this.contents.eq(i).offset().top - 80 + "px";
        })
    }
    bindEvent(){
          let _this = this;
          this.lis.click(function(){
              $("html").animate({
                scrollTop : $(this).attr("min")
              })
          });
          this.totop.click(function(){
              $("html").animate({
                  scrollTop : 0
              });
          })
    }
}
new Stairs();